Refine notification style

Update the notification style according to the latest mockups:
 - make notification icons smaller and prefer symbolic variants
 - remove background box when not hovered/focused
 - increase spacing between elements
 - use normal text sizes

https://bugzilla.gnome.org/show_bug.cgi?id=775763

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 2714b92588f392b570472c6b8e6a98076eb2d3d8..6a3f875941195d5b948b3e4c08f2c64327cb80db 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -868,54 +868,53 @@ StScrollBar {
     background-color: #0d0d0d; }
 
 .message-list-sections {
-  spacing: 1.5em; }
+  spacing: 1em; }
 
 .message-list-section,
 .message-list-section-list {
-  spacing: 0.7em; }
+  spacing: 0.4em; }
 
 .message {
-  background-color: #0d0d0d;
   border-radius: 3px; }
   .message:hover, .message:focus {
-    background-color: #262626; }
+    background-color: #0d0d0d; }
 
 .message-icon-bin {
-  padding: 8px 0px 8px 8px; }
+  padding: 10px 3px 10px 10px; }
   .message-icon-bin:rtl {
-    padding: 8px 8px 8px 0px; }
+    padding: 10px 10px 10px 3px; }
 
 .message-icon-bin > StIcon {
-  icon-size: 32px; }
-
-.message-secondary-bin:ltr {
-  padding-left: 8px; }
-.message-secondary-bin:rtl {
-  padding-right: 8px; }
+  color: #cccccc;
+  icon-size: 16px;
+  -st-icon-style: symbolic; }
 
 .message-secondary-bin {
-  color: #999999; }
+  padding: 0 12px; }
+
+.message-secondary-bin > .event-time {
+  color: #999999;
+  font-size: 0.7em; }
 
 .message-secondary-bin > StIcon {
   icon-size: 16px; }
 
 .message-title {
-  font-weight: bold;
-  font-size: 1.1em; }
+  color: #f2f2f2; }
 
 .message-content {
-  padding: 8px;
-  font-size: .9em; }
+  color: #cccccc;
+  padding: 10px; }
 
 .message-media-control {
-  padding: 6px; }
+  padding: 12px; }
   .message-media-control:last-child:ltr {
     padding-right: 18px; }
   .message-media-control:last-child:rtl {
     padding-left: 18px; }
 
 .media-message-cover-icon {
-  icon-size: 32px; }
+  icon-size: 48px !important; }
   .media-message-cover-icon.fallback {
     color: #1a1a1a;
     background-color: #000;

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 7f6d89bfcd5fa1c4238eed83dcab75949df72a4d..a172894788ec73c82be9aa6d29243809fdb0111d 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 7f6d89bfcd5fa1c4238eed83dcab75949df72a4d
+Subproject commit a172894788ec73c82be9aa6d29243809fdb0111d

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index efac28f912e382f701191fa553525d519b20760a..58a76566ddb0fd2e72fd85d78ecc46110406f0cb 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -868,54 +868,53 @@ StScrollBar {
     background-color: #454c4c; }
 
 .message-list-sections {
-  spacing: 1.5em; }
+  spacing: 1em; }
 
 .message-list-section,
 .message-list-section-list {
-  spacing: 0.7em; }
+  spacing: 0.4em; }
 
 .message {
-  background-color: #454c4c;
   border-radius: 3px; }
   .message:hover, .message:focus {
-    background-color: #5d6767; }
+    background-color: #454c4c; }
 
 .message-icon-bin {
-  padding: 8px 0px 8px 8px; }
+  padding: 10px 3px 10px 10px; }
   .message-icon-bin:rtl {
-    padding: 8px 8px 8px 0px; }
+    padding: 10px 10px 10px 3px; }
 
 .message-icon-bin > StIcon {
-  icon-size: 32px; }
-
-.message-secondary-bin:ltr {
-  padding-left: 8px; }
-.message-secondary-bin:rtl {
-  padding-right: 8px; }
+  color: #bebeb6;
+  icon-size: 16px;
+  -st-icon-style: symbolic; }
 
 .message-secondary-bin {
-  color: #8e8e80; }
+  padding: 0 12px; }
+
+.message-secondary-bin > .event-time {
+  color: #8e8e80;
+  font-size: 0.7em; }
 
 .message-secondary-bin > StIcon {
   icon-size: 16px; }
 
 .message-title {
-  font-weight: bold;
-  font-size: 1.1em; }
+  color: #e2e2df; }
 
 .message-content {
-  padding: 8px;
-  font-size: .9em; }
+  color: #bebeb6;
+  padding: 10px; }
 
 .message-media-control {
-  padding: 6px; }
+  padding: 12px; }
   .message-media-control:last-child:ltr {
     padding-right: 18px; }
   .message-media-control:last-child:rtl {
     padding-left: 18px; }
 
 .media-message-cover-icon {
-  icon-size: 32px; }
+  icon-size: 48px !important; }
   .media-message-cover-icon.fallback {
     color: #515a5a;
     background-color: #393f3f;

diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 721fc9f6775016b7cd5a4735f96abd9c336a4430..71708bfd431c0307454881330fdf58d0f3b9bc97 100644 (file)
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -20,7 +20,7 @@ const MSECS_IN_DAY = 24 * 60 * 60 * 1000;
 const SHOW_WEEKDATE_KEY = 'show-weekdate';
 const ELLIPSIS_CHAR = '\u2026';
 
-const MESSAGE_ICON_SIZE = 32;
+const MESSAGE_ICON_SIZE = 16;
 
 // alias to prevent xgettext from picking up strings translated in GTK+
 const gtk30_ = Gettext_gtk30.gettext;
@@ -958,7 +958,8 @@ const NotificationSection = new Lang.Class({
 
     _createTimeLabel: function(datetime) {
         let label = new St.Label({ style_class: 'event-time',
-                                   x_align: Clutter.ActorAlign.START });
+                                   x_align: Clutter.ActorAlign.START,
+                                   y_align: Clutter.ActorAlign.END });
         label.connect('notify::mapped', () => {
             if (label.mapped)
                 label.text = Util.formatTimeSpan(datetime);

diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 66d911dc55788c080bc2ccd4eeaf070f5fa9d51a..8175711ba40c061319c26c042859c668f952258f 100644 (file)
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -318,6 +318,7 @@ const Message = new Lang.Class({
 
         this._iconBin = new St.Bin({ style_class: 'message-icon-bin',
                                      y_expand: true,
+                                     y_align: St.Align.START,
                                      visible: false });
         hbox.add_actor(this._iconBin);